{__NOLAYOUT__}
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="__SITE__/static/admin/css/base.css" />
    <link rel="stylesheet" href="__SITE__/static/admin/css/set.css" />
    <link rel="stylesheet" href="__SITE__/static/admin/css/dialog.css" />
    <script type="text/javascript" src="__SITE__/static/admin/js/base.js" ></script>
    <link rel="stylesheet" href="__SITE__/static/admin/css/big-bg.css" />
    <script type="text/javascript" src="__SITE__/static/admin/js/jquery-2.1.0.js" ></script>
    <script type="text/javascript" src="__SITE__/static/admin/js/dialog.js" ></script>
</head>
<body>

<div class="container fill-all flex">
    <div class="pf-left flex v-flex">
        <div class="top header-height">
            <div class="music header-admin-height flex">

                <div class="flex-1 flex v-center">
                    <img class="img1" src="__SITE__/static/admin/img/2.png"/>
                </div>
                <div class="flex v-center">
                    <img class="img2" src="__SITE__/static/admin/img/3.png"/>
                </div>


            </div>
            <div class="running-left header-admin-height2 flex v-flex">

                <a href="{:url('Index/running')}" id="tab_running" class="menu-div flex-1 flex v-flex">
                    <div class="flex-1 flex v-center">
                        <div class="music-div">
                            <img src="__SITE__/static/admin/img/music1.png"/>
                        </div>
                        <div class="flex-1 text-center" style="font-weight: bold;">正在进行</div>
                    </div>
                    <div class="flex-1 flex v-center h-center">
                        {if !empty($li['proname'])}
                        <font>{$li['proname']}</font>
                        {else}
                        <font><b>无</b></font>
                        {/if}
                    </div>
                </a>

            </div>
        </div>
        <div class="menu flex-1">
            <a href="{:url('Index/index')}" id="tab_home" class="flex v-center menu-div">
                <div class="">
                    <img src="__SITE__/static/admin/img/home.png" class="img1"/>
                </div>
                <div class="flex-1 flex h-center">
                    首页
                </div>
            </a>
            <a href="{:url('Index/matchlist')}" id="tab_lists" class="flex v-center menu-div">
                <div class="">
                    <img src="__SITE__/static/admin/img/num.png" class="img1"/>
                </div>
                <div class="flex-1 flex h-center">
                    表演场次
                </div>
            </a>
            <a href="{:url('Index/history')}" id="tab_history" class="flex v-center menu-div">
                <div class="">
                    <img src="__SITE__/static/admin/img/history.png" class="img1"/>
                </div>
                <div class="flex-1 flex h-center">
                    比赛记录
                </div>
            </a>

            <a href="{:url('Index/player')}" id="tab_player" class="flex v-center menu-div">
                <div class="">
                    <img src="__SITE__/static/admin/img/user.png" class="img1"/>
                </div>
                <div class="flex-1 flex h-center">
                    参赛选手
                </div>
            </a>

            <a href="{:url('Index/setaccount')}" id="tab_account" class="flex v-center menu-div">
                <div class="">
                    <img src="__SITE__/static/admin/img/user.png" class="img1"/>
                </div>
                <div class="flex-1 flex h-center">
                    账户设置
                </div>
            </a>

        </div>
    </div>

    <div class="flex-1 pf-right flex v-flex">
        <div class="top header-height">
            <div class="admin header-admin-height flex">
                <div class="flex-1 flex v-center" style="padding-left: 15px;">
                    评分后台管理系统
                </div>
                <div class="flex v-center" style="padding-right: 15px;">
                    <a href="{:url('Login/logout')}" style="color: white;">
                        退出
                    </a>
                </div>


            </div>
            {if !empty($li['proname'])}

            <div class="running-right header-admin-height2 flex v-center">
                <div class="div-session1 flex-1">
                    <font>正在进行:表演项目<{$li['proname']}> {$li['performer']} {$li['musical']}</font>
                    <input type="hidden" value="{$li['id']}" id="yc1">
                </div>
                <div class="div-session2">
                    <a href="#" class="finish" id="end1">
                        结束
                    </a>
                </div>
            </div>
            {else}
            <div class="running-right header-admin-height2 flex v-center">
                <div class="div-session1 flex-1">
                    <font>正在进行:表演项目&nbsp;<b>无</b></font>
                </div>
                <div class="div-session2">
                </div>
            </div>
            {/if}

        </div>
        <div style="height: 7px;"></div>
        <div class="content flex-1 bac-aliceblue home-content flex v-flex">
            <div class="big-bg flex-1 flex v-flex ">
                <div class="flex-2"></div>
                <div class="flex-3 music-runing-container flex v-flex">
                    <div class="music-info text-center">
                        <div class="music-info text-center">
                            <h1 class="title">《{$li['proname']}》</h1>
                            <div class="flex">

                                <div class="flex-2 text-right">表演者:{$li['performer']}</div>
                                <div class="flex-1"></div>
                                <div class="flex-2 text-left">乐器:{$li['musical']}</div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 music-souce flex v-flex">
                        <!--以下是评分项-->
                        <div class="flex-1 flex v-center">

                            <div class="flex-1 text-center">
                                乐感理解
                            </div>
                            <div class="flex-1 text-center">
                                技巧掌握
                            </div>
                            <div class="flex-1 text-center">
                                曲目流畅
                            </div>
                            <div class="flex-1 text-center">
                                音色控制
                            </div>
                            <div class="flex-1 text-center">
                                音乐素养
                            </div>
                            <div class="flex-1 text-center">
                                总计
                            </div>
                        </div>

                        <!--以下是评分-->
                        <div class="flex-1 flex v-center">

                            <div class="flex-1 text-center">
                                <span id="one">{$list['learn']}</span>分
                            </div>
                            <div class="flex-1 text-center">
                                <span id="two">{$list['skill']}</span>分
                            </div>
                            <div class="flex-1 text-center">
                                <span id="three">{$list['fluency']}</span>分
                            </div>
                            <div class="flex-1 text-center">
                                <span id="four">{$list['control']}</span>分
                            </div>
                            <div class="flex-1 text-center">
                                <span id="five">{$list['influence']}</span>分
                            </div>
                            <div class="flex-1 text-center">
                                <span id="six">{$list['avgscore']}</span>分
                            </div>
                        </div>

                    </div>



                </div>
            </div>
        </div>


    </div>

</div>

<div class="alert-or-confirm-dialog confirm-dialog dialog fill-all flex v-center h-center">

    <div class="corner-white flex v-flex">
        <div class="dialogs-title">
            确认删除？
        </div>
        <div class="contents flex-1 flex v-center h-center">
            内容<br>
            内容
        </div>

        <div class="btn-container flex">
            <div class="flex-1 flex h-center v-center">
                <a href="javascript:;" class="confirms-cancle btn-class btn-gray flex h-center v-center">
                    取消
                </a>
            </div>
            <div class="flex-1 flex h-center v-center">
                <a href="javascript:;" class="alert-confirm btn-class btn-blue flex h-center v-center">
                    确定
                </a>
            </div>

        </div>

    </div>

</div>

<script>
    $(function(){

        var ws = new WebSocket("ws://{$puship}");
        ws.onmessage = function (e)  {
            var data = eval("("+e.data+")");
            var type = data.type || '';
            switch(type) {
                case 'ping':
                    ws.send('{"type":"pong"}');
                    break;

                case 'msg' :
                    $("#one").html(data.data.learn);
                    $("#two").html(data.data.skill);
                    $("#three").html(data.data.fluency);
                    $("#four").html(data.data.control);
                    $("#five").html(data.data.influence);
                    $("#six").html(data.data.avgscore);
                    break;

                case 'init':
                    $.post("__SITE__/admin/Program/running",{client_id:data.client_id},function (data) {

                    },'json');
            }
        };

        $("#end1").click(function () {
            var id = $("#yc1").val();
            dialog.confirm({color:'red',content:'确定结束？'},function () {
                $.ajax({
                    url:"__SITE__/admin/Program/end",
                    data:{id:id},
                    type:'POST',
                    dataType:'json',
                    success:function (data) {
                        if(data.status == 1) {
                            window.location.href = "__SITE__/admin/Index/history";
                        }
                    }
                });
            })
        });


        //切换选中示例
        //home,lists,history,account,running,
        var select_tab = "running";
        if(!select_tab){
            select_tab = "home";
        }
        $(".menu .menu-div").removeClass("bac-blue");

        $(".menu #tab_"+select_tab).addClass("bac-blue");
        if(select_tab=="home"){
            $(".running-right").hide();
        }
        if(select_tab=="running"){
            $("#tab_running").addClass("bac-blue");
        }


    });
    $(function(){
        $(".big-bg").click(function(){
            if($(".big-bg").hasClass("bigs")){
                $(".big-bg").removeClass("bigs");
            }else{
                $(".big-bg").addClass("bigs");
            }
        });
    });

</script>
</body>
</html>
